import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Popover, Card, Form, Input, Button, Select, DatePicker, Col, Row, Spin, notification  } from 'antd';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import styles from '../style.less';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import FooterToolbar from '@/components/FooterToolbar';

const { Option } = Select;
const { RangePicker } = DatePicker;

@connect(({settings}) => ({
  Organizer: settings.Organizer,
  Contact: settings.Contact,
  CompetitionInformation: settings.CompetitionInformation,
}))
@Form.create()
class MessageSetting extends PureComponent {
  
  state = {
    value: '',
    loading: false,
  };
  

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'settings/getCompetitionInformation',
      callback: (res)=>{
        this.setState({
          value : res,
        }) 
      }
    });
    dispatch({
      type: 'settings/getContact',
    });
    dispatch({
      type: 'settings/getOrganizer',
    });

  }


  handleChange = (value) => {
    // this.setState({
    //   value,
    // })
  };

  getErrorInfo = () => {
    // const {
    //   form: { getFieldsError },
    // } = this.props;
    // const errors = getFieldsError();
    // const errorCount = Object.keys(errors).filter(key => errors[key]).length;
    // if (!errors || errorCount === 0) {
    //   return null;
    // }
    // const scrollToField = fieldKey => {
    //   const labelNode = document.querySelector(`label[for="${fieldKey}"]`);
    //   if (labelNode) {
    //     labelNode.scrollIntoView(true);
    //   }
    // };
    // const errorList = Object.keys(errors).map(key => {
    //   if (!errors[key]) {
    //     return null;
    //   }
    //   return (
    //     <li key={key} className={styles.errorListItem} onClick={() => scrollToField(key)}>
    //       <Icon type="cross-circle-o" className={styles.errorIcon} />
    //       <div className={styles.errorMessage}>{errors[key][0]}</div>
    //       <div className={styles.errorField}>{fieldLabels[key]}</div>
    //     </li>
    //   );
    // });
    // return (
    //   <span className={styles.errorIcon}>
    //     <Popover
    //       title="表单校验信息"
    //       content={errorList}
    //       overlayClassName={styles.errorPopover}
    //       trigger="click"
    //       getPopupContainer={trigger => trigger.parentNode}
    //     >
    //       <Icon type="exclamation-circle" />
    //     </Popover>
    //     {errorCount}
    //   </span>
    // );
  };

  onValidateForm = () => {
    const {
      form: { validateFieldsAndScroll },
      dispatch,
    } = this.props;
    validateFieldsAndScroll((error, values) => {
      if (!error) {
        console.log(values)
        // submit the values
        dispatch({
          type: 'settings/setInformation',
          payload: values,
          callback: (res)=>{
            if(res==="finsh"){
              this.setState({
                loading:false
              })
              notification['success']({
                message: '设置成功',
                description: '成功设置 基本信息，活动单位，联系方式',
              });
            }else{
              setTimeout(
                ()=>this.setState({
                  loading:false
                })
              ,2000);
            }
            
          }
        });
        this.setState({
          loading:true
        })
      }
    });
  };


  render() {
    const { form, CompetitionInformation, Contact, Organizer } = this.props;
    const { getFieldDecorator } = form;
    console.log(this.props)
    return (
      <GridContent>
        <Spin size="large" tip="Loading..." spinning={this.state.loading}>
          <Card title="基本信息" className={styles.card}>
            <Form layout="vertical" className={styles.stepForm}>
              <Row gutter={16}>
                <Col lg={6} md={12} sm={24}>
                  <Form.Item label="竞赛名称">
                    {getFieldDecorator('name', {
                      rules: [{ required: true, message: '请输入竞赛名称' }],
                      initialValue: CompetitionInformation.name
                    })(<Input placeholder="竞赛名称" />)}
                  </Form.Item>
                </Col>
                <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
                  <Form.Item label="竞赛时间">
                    {getFieldDecorator('competitionStartDate', {
                      rules: [{ required: true, message: '请选择时间段' }],
                      initialValue: CompetitionInformation&&CompetitionInformation.competitionStartDate
                    })(<RangePicker />)}
                  </Form.Item>
                </Col>
                <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
                  <Form.Item label="报名时间">
                    {getFieldDecorator('enrollStartDate', {
                      rules: [{ required: true, message: '请选择时间段' }],
                      initialValue: CompetitionInformation&&CompetitionInformation.enrollStartDate
                    })(<RangePicker />)}
                  </Form.Item>
                </Col>
              </Row>
              <Row>
                <Col>
                  <Form.Item label="竞赛介绍">
                    {getFieldDecorator('competitionIntroduction', {
                      rules: [{ required: true, message: '请填写竞赛介绍' }],
                      initialValue: this.state.value
                    })
                    (<ReactQuill onChange={this.handleChange} />)}
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </Card>
          <Card title="活动单位" className={styles.card}>
            <Form layout="horizontal" className={styles.stepForm}>
              <Row gutter={16}>
                <Col lg={6} md={12} sm={24}>
                  <Form.Item label="主办单位">
                    {getFieldDecorator('sponsor',{
                      rules: [{required:true}],
                      initialValue: Organizer.sponsor
                    })(<Input />)}
                  </Form.Item>
                </Col>
                <Col xl={{ span: 6}} lg={{ span: 6 }} md={{ span: 12 }} sm={24}>
                  <Form.Item label="承办单位">
                    {getFieldDecorator('organizer',{
                      initialValue: Organizer.organizer
                    })(<Input />)}
                  </Form.Item>
                </Col>
                <Col xl={{ span: 6}} lg={{ span: 6 }} md={{ span: 24 }} sm={24}>
                  <Form.Item label="协办单位">
                    {getFieldDecorator('co_organizer',{
                      initialValue: Organizer.coOrganizer
                    })(<Input />)}
                  </Form.Item>
                </Col>
                <Col xl={{ span: 6}} lg={{ span: 6 }} md={{ span: 24 }} sm={24}>
                  {/* <Form.Item label="赞助">
                    {getFieldDecorator('supportingAgency',{
                      initialValue: Organizer.supportingAgency
                    })(<Input />)}
                  </Form.Item> */}
                </Col>
              </Row>
            </Form>
          </Card>
          <Card title="联系方式" className={styles.card}>
            <Form layout="horizontal" className={styles.stepForm}>
              <Row gutter={16}>
                <Col lg={6} md={12} sm={24}>
                  <Form.Item label="联系人">
                    {getFieldDecorator('contactName', {
                      rules: [{ required: true, message: '请设置联系人' }],
                      initialValue: Contact.name
                    })(<Input />)}
                  </Form.Item>
                </Col>
                <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
                  <Form.Item label="联系电话">
                    {getFieldDecorator('contactPhone', {
                      rules: [{ required: true, message: '请设置联系电话' }],
                      initialValue: Contact.phone

                    })(<Input />)}
                  </Form.Item>
                </Col>
                <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
                  <Form.Item label="QQ">
                    {getFieldDecorator('contactQQ',{
                      initialValue: Contact.qq

                    })(<Input />)}
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={16}>
                <Col lg={6} md={12} sm={24}>
                  <Form.Item label="邮箱">
                    {getFieldDecorator('contactEmail',{
                      rules: [{ type: "email" }],
                      initialValue: Contact.mail

                    })(<Input />)}
                  </Form.Item>
                </Col>
                <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
                  <Form.Item label="微信">
                    {getFieldDecorator('contactWeChat',{
                      initialValue: Contact.wechat

                    })(<Input />)}
                  </Form.Item>
                </Col>
                <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
                  {/* <Form.Item label="联系说明">
                    {getFieldDecorator('contactExplain',{
                      initialValue: Contact.contactExplain
                    })(<Input />)}
                  </Form.Item> */}
                </Col>
              </Row>
            </Form>
          </Card>
          <FooterToolbar style={{ width: `100%` }}>
            {this.getErrorInfo()}
            <Button type="primary" onClick={this.onValidateForm}>
              提交
            </Button>
          </FooterToolbar>
        </Spin>
      </GridContent>
    );
  }
}

export default MessageSetting;
